<template>
  <div class="container">
    <div class="totalData">
      <div class="title">数据统计</div>
      <el-row :gutter="24" class="totalBlock">
        <el-col :xs="8" :sm="8" :md="4" :lg="4" :xl="4" class="totalItem">
          <div class="item">
            <div class="item-num">{{ AIStatisticsInfo ? AIStatisticsInfo.total_count : '0' }}</div>
            <div class="item-brief">智能外呼数</div>
          </div>
        </el-col>
        <el-col :xs="8" :sm="8" :md="4" :lg="4" :xl="4" class="totalItem">
          <div class="item">
            <div class="item-num">{{ AIStatisticsInfo ? AIStatisticsInfo.sent : '0' }}</div>
            <div class="item-brief">接通数</div>
          </div>
        </el-col>
        <el-col :xs="8" :sm="8" :md="4" :lg="4" :xl="4" class="totalItem">
          <div class="item">
            <div class="item-num">{{ AIStatisticsInfo ? AIStatisticsInfo.through_percent : '0' }}</div>
            <div class="item-brief">接通率</div>
          </div>
        </el-col>
        <el-col :xs="8" :sm="8" :md="4" :lg="4" :xl="4" class="totalItem">
          <div class="item">
            <div class="item-num">{{ AIStatisticsInfo ? AIStatisticsInfo.level_a_num : '0' }}</div>
            <div class="item-brief">A级意向客户</div>
          </div>
        </el-col>
        <el-col :xs="8" :sm="8" :md="4" :lg="4" :xl="4" class="totalItem">
          <div class="item">
            <div class="item-num">{{ AIStatisticsInfo ? AIStatisticsInfo.level_a_percent : '0' }}<span>%</span></div>
            <div class="item-brief">A级意向客户占比</div>
          </div>
        </el-col>
        <el-col :xs="8" :sm="8" :md="4" :lg="4" :xl="4" class="totalItem">
          <div class="item">
            <div class="item-num">{{ AIStatisticsInfo ? AIStatisticsInfo.talk_time_sum : '0' }}</div>
            <div class="item-brief">通话总时长</div>
          </div>
        </el-col>
        <el-col :xs="8" :sm="8" :md="4" :lg="4" :xl="4" class="totalItem">
          <div class="item">
            <div class="item-num">{{ AIStatisticsInfo ? AIStatisticsInfo.talk_avg : '0' }}</div>
            <div class="item-brief">平均通话时长</div>
          </div>
        </el-col>
      </el-row>
    </div>
    <div class="search">
      <searchuinew :searchFormArr="searchFormArr" @searchParma="searchParma" :isAccording="isAccording"></searchuinew>
    </div>
    <div class="detailTable">
      <tableTemplate :table="table"></tableTemplate>
      <el-pagination
        small
        background
        :current-page="pageIndex"
        :page-size="pageSize"
        :page-sizes="[10, 20, 50, 100]"
        :total="totalPage"
        @current-change="currentChangeHandle"
        @size-change="sizeChangeHandle"
        layout="total, sizes, prev, pager, next, jumper"
        style="margin-top: 20px; text-align: right"
      ></el-pagination>
    </div>
  </div>
</template>

<script>
import { AIEnterTasksLisTApi, AIEnterTasksStatisticsApi } from '@/api/outboundCall'
export default {
  name: 'smsStatistics',
  data() {
    return {
      typeList: [
        { id: 1, name: '资产' },
        { id: 2, name: '回收' },
        { id: 3, name: '造粒厂' },
        { id: 4, name: '制品厂' },
        { id: 5, name: '智能' },
        { id: 6, name: '名录' },
      ],
      AIStatisticsInfo: {},
      pageIndex: 1,
      pageSize: 10,
      totalPage: 0,
      searchFormArr: [
        {
          fieldName: '时间选择',
          type: 'timePicker',
          field: 'time',
          placeholder: '请选择时间',
          timeType: 'daterange',
          format: 'yyyy-MM-dd',
        },
        {
          fieldName: '外呼类型',
          type: 'select',
          field: 'run_type',
          option: [
            { id: 1, text: '资产' },
            { id: 2, text: '回收' },
            { id: 3, text: '造粒厂' },
            { id: 4, text: '制品厂' },
            { id: 5, text: '智能' },
            { id: 6, text: '名录' },
          ],
          placeholder: '请选择外呼类型',
          width: 180,
        },
      ],
      isAccording: true,
      searchParams: {
        start_time: '',
        end_time: '',
        run_type: '',
      },
      table: {
        // 数据数组
        Dataorigin: [],
        // 表头数组
        header: [
          { name: '序号', prop: 'index', width: 80 },
          { name: '外呼类型', prop: 'run_type_name' },
          { name: '任务名称', prop: 'task_name' },
          { name: '智能外呼数', prop: 'total_count' },
          { name: '接通数', prop: 'sent' },
          { name: '接通率', prop: 'through_percent' },
          { name: 'A级意向客户', prop: 'level_a_num' },
          { name: 'A级意向客户占比', prop: 'level_a_percent' },
          { name: '通话总时长', prop: 'talk_time_sum' },
          { name: '数据接收人', prop: 'user' },
          { name: '外链打开次数', prop: 'msg_click_num' },
        ],
      },
    }
  },
  mounted() {
    // 处理权限
    this.getAitatistics()
    this.AIEnterTasksList()
  },
  methods: {
    // 列表查询
    searchParma(e) {
      if (e.run_type) {
        this.searchParams.run_type = e.run_type
      } else {
        this.searchParams.run_type = ''
      }
      if (e.time && e.time[0] && e.time[1]) {
        this.searchParams.start_time = e.time[0]
        this.searchParams.end_time = e.time[1]
      } else {
        this.searchParams.start_time = ''
        this.searchParams.end_time = ''
      }
      this.pageIndex = 1
      this.AIEnterTasksList()
      this.getAitatistics()
    },
    getAitatistics() {
      const info = this.searchParams
      const formData = new FormData()
      for (let key in info) {
        formData.set(key, info[key])
      }
      AIEnterTasksStatisticsApi(formData)
        .then((res) => {
          this.AIStatisticsInfo = res.data
        })
        .catch((e) => {
          this.AIStatisticsInfo = {}
        })
    },
    AIEnterTasksList() {
      const info = Object.assign({ pageNumber: this.pageIndex, pageSize: this.pageSize }, this.searchParams)
      const formData = new FormData()
      for (let key in info) {
        formData.set(key, info[key])
      }
      AIEnterTasksLisTApi(formData)
        .then((res) => {
          this.table.Dataorigin = res.result.items
          this.table.Dataorigin.forEach((item, index) => {
            item.index = index + 1
            item.through_percent = item.through_percent || item.through_percent == '0' ? item.through_percent + '%' : ''
            item.level_a_percent = item.level_a_percent || item.level_a_percent == '0' ? item.level_a_percent + '%' : ''
            const type = this.typeList.find((type) => {
              return type.id === item.run_type
            })
            if (type) {
              item.run_type_name = type.name
            }
          })
          this.totalPage = res.result.total
        })
        .catch((e) => {
          this.table.Dataorigin = []
          this.totalPage = 0
        })
    },
    // 每页数
    sizeChangeHandle(val) {
      this.pageSize = val
      this.pageIndex = 1
      this.AIEnterTasksList()
    },
    // 当前页
    currentChangeHandle(val) {
      this.pageIndex = val
      this.AIEnterTasksList()
    },
  },
}
</script>

<style scoped lang="scss">
.container {
  padding: 16px;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  .totalData {
    width: 100%;
    background: #fff;
    padding: 12px 16px;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    .title {
      font-size: 14px;
      margin-bottom: 10px;
    }
    .totalBlock {
      border: 1px solid #f0f0f0;
      margin: 0 !important;
      .totalItem {
        padding: 20px 0 !important;
        .item {
          width: 100%;
          border-right: 1px solid #e6e6e6;
          flex-direction: column;
          display: flex;
          align-items: center;
          .item-num {
            font-size: 16px;
            font-weight: 700;
            color: #262626;
            margin-top: -2px;
          }
          .item-brief {
            margin-top: 4px;
            color: #8c8c8c;
            font-size: 14px;
          }
        }
        &:last-child {
          .item {
            border-right: none;
          }
        }
      }
    }
  }
  .search {
    padding: 0 32px 24px;
  }
  .detailTable {
    padding: 0 32px;
  }
}

.el-form-item {
  margin: 0;
  margin-top: 10px;
}
</style>
